<div>
  <div class="card-panel">
    <span>
      <b>{{'店铺权限管理'|translate}}：</b>
      {{'目前您已监控'|translate}}<b class="red-text">{{vm.table.count}}/{{user.activeVersionInfo.shopCount}}</b>{{'个店铺。'|translate}}
    </span>
  </div>
  <div class="container" style="position: relative;">
    <ngx-busy [busy]="busy"></ngx-busy>
    <div class="clearfix">
      <div class="left">
        <en-mark></en-mark>
      </div>
      <div class="right">
        <a mat-raised-button color="primary" (click)="add()" *ngIf="!addView">
          {{'添加' |translate}}<i class="fa fa fa-plus pl5"></i>
        </a>
        <a mat-raised-button color="primary" (click)="add()" *ngIf="addView">
         <i class="fa fa-angle-left pr5" style="vertical-align: baseline;"></i>
         {{'返回' |translate}}
        </a>
        <a mat-raised-button color="primary" (click)="export()" *ngIf="!addView">
          {{'下载'|translate}}
        </a>
      </div>
    </div>
    <div class="table-view" [hidden]="addView">
      <table class="responsive-table bordered highlight" id="shopExport">
        <thead>
          <tr>
            <th *ngFor="let column of columns;let $index = index;" st-sort [st-sort]="column" [st-sort-data]="param" (sortChanged)="sortChange($event)" [innerHTML]="column.title |translate" [ngClass]="column.class" [title]="column.title |translate"> </th>
            <th>{{'监控'|translate}}</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let shop of vm.table.shops | paginate: { itemsPerPage: 10, currentPage: p,id: 'shops_table'};let $index = index;">
            <td>
              <p class="nick-p left-align" *ngIf="shop.shopName">
                <span class="taobao-icon" [ngClass]="{'icon-service-tianmao':shop.shopType=='商城','icon-service-taobao':shop.shopType=='C店'||shop.shopType==null,'icon-service-tianmaoguoji':shop.shopType =='天猫国际','icon-fest-quanqiugou':shop.shopType =='全球购'}"></span>
                <a href="javascript:;" class="linkHover text-overflow width180" [innerHTML]="shop.shopName | highlight:param.shopName" goDetail [title]="shop.shopName" [data]="shop" type="monitorShopDetail"></a>
                <!-- taoabao -->
                <a class="grey-text" title="去淘宝" href="http://store.taobao.com/shop/view_shop.htm?user_number_id={{shop.uid}}" target="_blank"><i class="fa fa-external-link cp f16"></i></a>
              </p>
              <p *ngIf="!shop.shopName">{{'该店铺已失效'|translate}}</p>
            </td>
            <td>
              <span style="display: none" hidden ng-bind="shop.shopLevelSrc"></span>
              <img src="http://trendata.oss-cn-hangzhou.aliyuncs.com/marketconditions/credit{{shop.shopLevelType}}.png" style="width: 18px;" *ngFor="let i of shop.shopLevels;let $index = index" />
            </td>
            <td>
              {{shop.productCount}}
            </td>
            <!-- 日销 -->
            <td><span class="tm-yen">¥</span>{{shop.sellMoney || 0 | bigNum}}</td>
            <td>{{shop.sellAmount || 0 | number:0}}</td>
            <!-- 月销 -->
            <td><span class="tm-yen">¥</span>{{shop.monthSellMoney || 0 | bigNum}}</td>
            <td>{{shop.monthSellAmount || 0 | number:0}}</td>
            <td>
              <monitor-slide-toggel type="shop" [data]="shop" [checked]="true"></monitor-slide-toggel>
            </td>
          </tr>
          <tr *ngIf="vm.table.shops.length ==0">
            <td colspan="10" class="center-align">
              <span>{{'暂无店铺监控'|translate}}&nbsp;<a md-raised-button color="primary" (click)="add()">{{'立即添加'|translate}}</a></span>
            </td>
          </tr>
        </tbody>
      </table>
      <pagination-controls class="center-align pt20" id="shops_table" (pageChange)="p =$event" maxSize="9" directionLinks="true" autoHide="true">
      </pagination-controls>
    </div>
    <div class="add-view" *ngIf="addView">
      <monitor-add type="shop"></monitor-add>
    </div>
  </div>
</div>
